<template>
  <!-- <v-scale-screen width="1920" height="1680" :boxStyle="boxStyle"> -->
  <div class="bgc">
    <div class="main">
      <!-- <div class="quan" @click="toggleFullScreen()">
          <i class="el-icon-full-screen"></i>
        </div> -->
      <div class="search">
        <el-row :gutter="20">
          <!-- <el-col :span="8"> </el-col> -->
          <el-col :span="24">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
              <el-form-item label="医院" prop="hosp">
                <el-select v-model="queryParams.hospCode" placeholder="请选择医院" @change="TitleSelect()">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="答卷" prop="title">
                <el-select v-model="queryParams.templateId" @change="titleHandle" placeholder="请选择问卷">
                  <el-option v-for="item in titleeOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <!-- <el-input v-model="form.title" placeholder="请输入问卷名称" source/> -->
              </el-form-item>
              <el-form-item label="" prop="labelName">
                <el-button type="success" plain @click="getTime('today')">今日</el-button>
                <el-button type="primary" plain @click="getTime('week')">本周</el-button>
                <el-button type="warning" plain @click="getTime('moon')">本月</el-button>
              </el-form-item>
              <el-form-item label="" prop="labelName">
                <el-date-picker v-model="times" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" @change="getTime('free')">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" v-if="false"
                  @click="handleQuery">确认</el-button>
                <el-button icon="el-icon-refresh" size="mini" v-if="false" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>

        </el-row>
      </div>
      <el-row :gutter="40">
        <el-col :span="6">
          <div class="allitem">
            <div class="iteml">
              <img src="../../assets/img/daiyuyue.png" alt="" />
            </div>

            <el-popover placement="bottom-end" title="答卷待处理量" width="200" trigger="hover" v-if="topRangle.pendingThan == 0"
              :content="hoverText">
              <div class="itemr" slot="reference" @mouseover="hoverHandle(1, topRangle.pendingThan)">
                <div class="itemrt">答卷待处理量</div>
                <div class="itemrnum">{{ topFour.pending }}</div>
                <div class="huanbi" v-if="queryParams.period !== null">
                  <div class="huanbiico" :class="{ green: topRangle.pendingThan < 0 }">
                    <i :class="upOrDown(topRangle.pendingThan)"></i>-
                  </div>
                  <div class="huanbiname" v-show="rangelText">环比{{ rangelText }}</div>
                </div>
              </div>
            </el-popover>
            <!-- 为0就展示popover，其他情况不展示 -->
            <div class="itemr" slot="reference" v-if="topRangle.pendingThan !== 0"
              @mouseover="hoverHandle(1, topRangle.pendingThan)">
              <div class="itemrt">答卷待处理量</div>
              <div class="itemrnum">{{ topFour.pending }}</div>
              <div class="huanbi" v-if="queryParams.period !== null">
                <div class="huanbiico" :class="{ green: topRangle.pendingThan < 0 }">
                  <i :class="upOrDown(topRangle.pendingThan)"></i>{{
                    topRangle.pendingThan == 0 ? '-' : topRangle.pendingThan + '%' }}
                </div>
                <div class="huanbiname" v-show="rangelText">环比{{ rangelText }}</div>
              </div>
            </div>

          </div>
        </el-col>
        <el-col :span="6">
          <div class="allitem">
            <div class="iteml">
              <img src="../../assets/img/yiqueren.png" alt="" />
            </div>
            <div class="itemr" slot="reference" @mouseover="hoverHandle(2, topRangle.countThan)">
              <div class="itemrt">答卷总量</div>
              <div class="itemrnum">{{ topFour.selectGross }}</div>
              <div class="huanbi" v-if="queryParams.period !== null">
                <div class="huanbiico" :class="{ green: topRangle.countThan < 0 }">
                  <i :class="upOrDown(topRangle.countThan)" v-show="topRangle.countThan"></i>{{ topRangle.countThan + '%'}}
                </div>
                <div class="huanbiname" v-show="rangelText">环比{{ rangelText }}</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="allitem">
            <div class="iteml">
              <img src="../../assets/img/zongliang.png" alt="" />
            </div>
            <div class="itemr" slot="reference" @mouseover="hoverHandle(3, topRangle.pageThan)">
              <div class="itemrt">提交转化率</div>
              <div class="itemrnum" v-if="topFour.divide">{{ topFour.divide }}%</div>
              <div class="huanbi" v-if="queryParams.period !== null">
                <div class="huanbiico" :class="{ green: topRangle.pageThan < 0 }">
                  <i :class="upOrDown(topRangle.pageThan)" v-show="topRangle.pageThan"></i>{{ topRangle.pageThan
                    + '%'
                  }}
                </div>
                <div class="huanbiname" v-show="rangelText">环比{{ rangelText }}</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="allitem">
            <div class="iteml">
              <img src="../../assets/img/huanzong.png" alt="" />
            </div>
            <div class="itemr" slot="reference" @mouseover="hoverHandle(4, topRangle.scoreThan)">
              <div class="itemrt">满意度</div>
              <div class="itemrnum" v-if="topFour.synthesisScore">{{ topFour.synthesisScore }}%</div>
              <div class="huanbi" v-if="queryParams.period !== null">
                <div class="huanbiico" :class="{ green: topRangle.scoreThan < 0 }">
                  <i :class="upOrDown(topRangle.scoreThan)" v-show="topRangle.scoreThan"></i>{{ topRangle.scoreThan + '%'
                  }}
                </div>
                <div class="huanbiname" v-show="rangelText">环比{{ rangelText }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="10">
          <div class="bing">
            <div class="bingtitle">
              {{titleChange}}整体满意度
            </div>
            <leftOne></leftOne>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="bing">
            <div class="bingtitle">
              {{titleChange}}满意度趋势变化
            </div>
            <rightOne></rightOne>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="10">
          <div class="bing">
            <div class="bingtitle">
              {{titleChange}}答卷渠道来源统计
            </div>
            <leftTwo></leftTwo>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="bing">
            <div class="bingtitle">
              {{titleChange}}答卷量数量变化趋势
            </div>
            <rightTwo></rightTwo>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
          <div class="bing">
            <div class="bingtitle">
              {{titleChange}}满意度排行
            </div>
            <three></three>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <!-- </v-scale-screen> -->
</template>

<script>
import leftOne from "./PieChart.vue";
import rightOne from "./zhexian.vue";
import leftTwo from "./pietwo.vue";
import rightTwo from "./linetwo.vue";
import three from "./zhu.vue";
import moment from "moment"
import { hosList, TitleList, dataStatisticsOne, dataStatisticsTwo, dataStatisticsThree, dataStatisticsFour, dataStatisticsFive } from '@/api/hcem/title'

export default {
  data() {
    return {
      options: [],//医院列表选项
      chartColumn: null,
      zhe: null,
      bing: null,
      zhu: null,
      nowDate: "",
      active: "",
      boxStyle: {
        backgroundColor: "#ffffff"
        // backgroundColor: " #030a89"
      },
      timeText: "", // 时间显示
      timer: null, // 定时器(时间显示的)
      queryParams: {
        templateId: null,
        hospCode: null,
        period: null,
        startTime: '',
        endTime: ''
      },
      topFour: {
        divide: '',
        pending: '',
        selectGross: '',
        synthesisScore: ''
      },
      topRangle: {
        countThan: 0,  //待处理环比
        pageThan: 0,  //答卷总量环比
        pendingThan: 0, //	提交转化率环比
        scoreThan: 0  //满意度环比
      },
      hoverText: '',
      rangelText: '',
      titleeOptions: [], //答卷
      times: [],
      titleChange:'',
    };
  },
  components: {
    leftOne,
    rightOne,
    three,
    leftTwo,
    rightTwo
  },
  methods: {
    titleHandle(selectValue){
     let title = this.titleeOptions.find(v => v.value == selectValue )
     if(title !== undefined){
      //console.log(title,'sdf');
      this.titleChange = title.label
     }
     // console.log(e);
    },
    getdateon() {
      var date = new Date();

      // 获取当前月份
      var nowMonth = date.getMonth() + 1;

      // 获取当前是几号
      var strDate = date.getDate();

      // 添加分隔符“-”
      var seperator = "-";

      // 对月份进行处理，1-9月在前面添加一个“0”
      if (nowMonth >= 1 && nowMonth <= 9) {
        nowMonth = "0" + nowMonth;
      }

      // 对月份进行处理，1-9号在前面添加一个“0”
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }

      // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
      this.nowDate =
        date.getFullYear() + "年" + nowMonth + "月" + strDate + "日";
    },
    toggleFullScreen() {
      // 检查当前是否处于全屏模式
      if (this.$fullscreen.isFullscreen) {
        this.active = "2";

        this.$fullscreen.exit();
      } else {
        this.$fullscreen.request();
        this.active = "1";
      }
      // 或者直接调用 toggle() 方法
      // toggle()方法会自动检测当前是否处于全屏状态，如果是，则退出全屏，如果不是，则进入全屏
      // this.$fullscreen.toggle();
    },
    timeStart() {
      // 设置定时器
      this.timer = setInterval(() => {
        this.timeText = this.formatDate(new Date());
      }, 1000);
    },
    // 格式化时间
    formatDate(date) {
      // 格式化时间为 YYYY-MM-DD HH:MM:SS
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      // 判断是不是小于10 返回01 02 03
      function check(num) {
        if (num < 10) {
          // 如果数字小于10,前边拼接个0
          return "0" + num;
        } else {
          return num;
        }
      }
      // 时间展示
      return `${check(year)}-${check(month)}-${check(day)} `;
      //  ${check(hours)}:
      //   ${check(minutes)}:
      //    ${check(seconds)}
    },
    async getHosList() {
      let res = await hosList()
      let data = res.data
      data.forEach(v => {
        this.options.push({
          value: v.hospital_code,
          label: v.hospital_name
        })
      })
      // console.log(res);
    },
    TitleSelect() {
      //hospCode   queryParams.hosp
      // console.log(123);
      this.resetQuery()
      if (this.queryParams.hospCode !== null) {
        this.getTitleList(this.queryParams.hospCode)
        this.queryParams.templateId = null
      }
    },
    async getTitleList(data) {
      this.titleeOptions = []
      let res = await TitleList(data)
      let list = res.data
      list.forEach(v => {
        this.titleeOptions.push({
          value: v.id,
          label: v.title
        })
      })
      // console.log(res, '试卷名称');
    },
    getTime(period) {
      if (period == 'free') {
        this.rangelText = ''  //自由选择下面不带环比了
        this.queryParams.period = null
        this.queryParams.startTime = moment(this.times[0]).format('YYYY-MM-DD') //开始时间
        this.queryParams.endTime = moment(this.times[1]).format('YYYY-MM-DD'); //结束时间
        this.handleQuery()
        return
      }
      this.times = []
      let now = new Date();
      let todayTime = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      //  this.queryParams.startTime = this.formatDate(todayTime) //开始时间时现在
      if (period == 'today') {
        this.queryParams.period = 'today'
        this.rangelText = '昨日'
        //   this.queryParams.endTime = this.formatDate(todayTime)
        this.times.push(todayTime)
      }
      if (period == 'week') {
        const weekTims = moment().subtract(7, 'days'); // 7天前
        //   this.queryParams.endTime = weekTims.format('YYYY-MM-DD');
        this.queryParams.period = 'weeks'
        this.rangelText = '上周'
        this.times.push(weekTims)
      }
      if (period == 'moon') {
        //  const moonTims = moment().subtract(1, 'months'); // 1月前; 
        const moonTims = moment().startOf('month');   //本月1号
        //  this.queryParams.endTime = moonTims.format('YYYY-MM-DD');
        this.queryParams.period = 'month'
        this.rangelText = '上月'
        this.times.push(moonTims)
      }
      this.times.push(todayTime)
      this.handleQuery()
    },
    async handleQuery() {
      if (this.queryParams.templateId == null || this.queryParams.hospCode == null) {
        this.$message.error('请选择医院和问卷');
        return
      }
      if (this.times.length == 0) {
        this.$message.error('请选择时间');
        return
      }
      // console.log(123);
      // return
      let res = await dataStatisticsOne(this.queryParams)
      this.topFour.divide = res.data.divide
      this.topFour.pending = res.data.pending
      this.topFour.selectGross = res.data.selectGross
      this.topFour.synthesisScore = res.data.synthesisScore == "NaN" ? '0' : res.data.synthesisScore
      // console.log(res);
      // dataStatisticsTwo, dataStatisticsThree, dataStatisticsFour
      //TwoData threeData
      const one = await dataStatisticsTwo(this.queryParams)
      const two = await dataStatisticsThree(this.queryParams)
      const three = await dataStatisticsFour(this.queryParams)

      this.$store.state.hcem.OneData = one.data
      this.$store.state.hcem.TwoData = two.data
      this.$store.state.hcem.threeData = three.data
      this.rangerCircle() //周环比
      //console.log(four);
    },
    async rangerCircle() {
      // queryParams: {
      //   templateId: null,
      //   hospCode: null,
      //周环比
      if (this.queryParams.period == null) return
      const four = await dataStatisticsFive(this.queryParams)
      this.topRangle.countThan = four.data.countThan
      this.topRangle.pageThan = four.data.pageThan
      this.topRangle.pendingThan = four.data.pendingThan
      this.topRangle.scoreThan = four.data.scoreThan
    },
    resetQuery() {
      //this.queryParams.templateId = null
      //this.queryParams.hospCode = null
      this.queryParams.period = null
      this.queryParams.startTime = ''
      this.queryParams.endTime = ''
      this.times = []
      this.rangelText = ''
      //重置四格数量
      this.topFour.divide = ''
      this.topFour.pending = ''
      this.topFour.selectGross = ''
      this.topFour.synthesisScore = ''
      // topFour: {
      //   divide: '',
      //   pending: '',
      //   selectGross: '',
      //   synthesisScore: ''
      // },
      //重置四格环比
      this.topRangle.countThan = 0
      this.topRangle.pageThan = 0
      this.topRangle.pendingThan = 0
      this.topRangle.scoreThan = 0

      this.$store.state.hcem.OneData.satisfaction = 0
      this.$store.state.hcem.OneData.dissatisfy = 0
      this.$store.state.hcem.OneData.normal = 0
      this.$store.state.hcem.OneData.jsonObjectList = []
      this.$store.state.hcem.TwoData.sourceScaleList = []
      this.$store.state.hcem.TwoData.submissionAmountList = []
      this.$store.state.hcem.threeData = []
      //   OneData: {
      //     satisfaction: 0,
      //     dissatisfy: 0,
      //     normal: 0,
      //     jsonObjectList:[]
      // },
      // TwoData: {
      //     sourceScaleList:[],
      //     submissionAmountList:[]
      // },
      // threeData: [],
      // topRangle: {
      //   countThan: 0,  //待处理环比
      //   pageThan: 0,  //答卷总量环比
      //   pendingThan: 0, //	提交转化率环比
      //   scoreThan: 0  //满意度环比
      // },

    },
    hoverHandle(type, data) {
      this.hoverText = `${this.rangelText !== undefined ? this.rangelText : ''}浏览量为${data}`
      // console.log(data);
    },
    async init() {
      if (this.options.length > 0) {
        this.queryParams.hospCode = this.options[0].value
        await this.getTitleList(this.queryParams.hospCode)
        if (this.titleeOptions.length > 0) {
          this.queryParams.templateId = this.titleeOptions[0].value
          this.getTime('week')
          //this.handleQuery()
        }
      } else {
        this.$message.error('获取医院失败')
      }
    }
  },
  computed: {
    upOrDown() {
      return (num) => {
        if (num > 0) {
          return {
            'el-icon-caret-top': true
          }
        } else {
          return {
            'el-icon-caret-bottom': true
          }
        }
      }
    }
  },
  async created() {
    // document.body.style.overflow = "auto";
    this.timeText = this.formatDate(new Date());
    // this.getdateon();
    await this.getHosList()
    await this.init()
  },
  destroyed() {
    clearInterval(this.timerr);
  },
  mounted: function () {
    this.timeStart();
    // this.gethead();

    //自动刷新获取数据(1000*60*60=>毫秒*秒*分钟，此时表示为60分钟)
    // this.refreshData=setInterval(()=>{
    // this.getInfo()
    // },1000*60*60);
    // this.initChart();
    // this.initChartt();
    // this.initCharttt();
    // this.initChartttt();
  }
};
</script>
<style>
body {
  /* overflow: auto; */
}
</style>
<style lang="scss" scoped>
.el-icon-full-screen {
  color: #000;
}

.green {
  color: green !important;
}

.bing {
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  padding: 20px;

  .bingtitle {
    font-size: 16px;
    line-height: 40px;
    color: #000;
    font-weight: bold;
  }

  .zhu {
    height: 320px;
    z-index: 999999;
  }
}

.main {
  width: 95%;
  margin: 0 auto;
  margin-top: 40px;
}

.bgc {
  background-size: 100% 100%;
  background-position: center;
  width: 100%;
  // height: 100%;
  position: relative;
  padding-bottom: 200px;

  .search {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .allitem {
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    padding: 20px;
    display: flex;

    .iteml {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      flex-shrink: 0;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .itemr {
      cursor: pointer;
      margin-left: 20px;

      .itemrt {
        font-size: 16px;
        line-height: 20px;
        color: #999;
      }

      .itemrnum {
        font-size: 24px;
        font-weight: bold;
        line-height: 40px;
      }

      .huanbi {
        display: flex;

        .huanbiico {
          color: red;
          font-size: 16px;
          line-height: 20px;
        }

        .huanbiname {
          margin-left: 10px;
          font-size: 16px;
          color: #999;
        }
      }
    }
  }
}
</style>
